<template>
  <div>
    <div class="title">
      <h1>Vuex 购物车示例</h1>
    </div>
    <div class="route">
      <router-link class="link" to="home">前往我的购物车</router-link>
    </div>
    <div class="product">
      <ul class="list">
        <li class="list-item" v-for="(item, index) in products" :key="index">
          <a class="content" href="#">
            <img class="image" :src="item.img" alt="" />
            <p class="price">{{ "￥" + item.price }}</p>
            <p class="title">{{ item.name }}</p>
            <div class="estimate">
              <span class="nums">{{ item.num }}</span> {{ "+条评价" }}
            </div>
            <p class="shop">{{ item.shop }}</p>
            <img class="icon" src="../assets/self.png" alt="" />
          </a>
          <div class="btns">
            <button @click="addToCart(item)">加入购物车</button>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { mapMutations } from "vuex";
import { mapActions } from "vuex";

export default {
  name: "Product",
  computed: {
    ...mapState("product", ["products"]),
  },
  methods: {
    ...mapMutations("cart", ["addToCart"]),
    ...mapActions("product", ["getProducts"]),
  },
  created() {
    this.getProducts();
  },
};
</script>

<style lang='scss' scope>
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
}
.route {
  display: flex;
  width: 600px;
  margin: 0 auto;
  justify-content: flex-end;
  align-items: center;
}
.link {
  color: #646fb0;
  font-weight: 600;
  border: 1px solid #dddddd;
  padding: 5px;
  margin: 10px;
}
.list {
  display: grid;
  width: 500px;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  align-items: center;
  margin: 0 auto;
}
.list-item {
  width: 220px;
  margin: 10px;
  border: 1px solid #eeeeee;
  font-size: 0.9rem;
  .price {
    color: #e4393c;
    font-size: 1.5rem;
    padding: 5px 10px;
  }
  .title {
    color: #666666;
    padding: 4px;
  }
  .estimate {
    color: #a7a7a7;
    padding: 4px;
    .nums {
      color: #646fb0;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      font-weight: 600;
    }
  }
  .shop {
    color: #999999;
    padding: 4px;
  }
  .icon {
    display: block;
    width: 33px;
    margin: 3px 5px;
  }
  .btns {
    position: relative;
    height: 3rem;
    width: 100%;
    button {
      width: 6rem;
      height: 2rem;
      color: #e4393c;
      border: 1px solid #dddddd;
      padding: 3px 6px;
      border-radius: 3px;
      position: absolute;
      right: 3px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
    }
  }
}
.image {
  display: block;
  width: 220px;
}
</style>